<div class="panel">
	<div class="panel panel-heading">
		<h3 class="panel-title">Growls</h3>
	</div>
	<section class="panel-body" style="height:500px;">
		<script type="text/javascript">
			 $(function() {
                
                setTimeout(function() {
                    $.bootstrapGrowl("This is another test.", { 
                    	ele: 'section',
                    	offset: {from: 'top', amount: 100},
                    	type: 'success' 
                    });
                }, 1000);
                
                setTimeout(function() {
                    $.bootstrapGrowl("Danger, Danger!", {
                    	ele: 'section',
                    	offset: {from: 'top', amount: 100},
                        type: 'danger',
                        align: 'center',
                        width: 'auto',
                        allow_dismiss: false
                    });
                }, 2000);
                
                setTimeout(function() {
                    $.bootstrapGrowl("Danger, Danger!", {
                    	ele: 'section',
                    	offset: {from: 'top', amount: 100},
                        type: 'info',
                        align: 'left',
                        stackup_spacing: 30
                    });
                }, 3000);
            });

		</script>
	</section>
</div>
<!-- all the popup -->
